<template>
  <canvas id="fullscreenCanvas"></canvas>
</template>

<script>
import {Main} from '../js/main'
export default {
  data() {
    return {
      plist: []
    };
  },
  mounted() {
    this.canvas = document.getElementById('fullscreenCanvas');
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.addListener();
    let main = new Main(this.canvas);
    main.test();
    this.main = main;
  },
  created() {
    
  },
  methods: {
    addListener() {

      this.handleMouseDown = (event) => {
        console.log('Mouse down at:', event.clientX, event.clientY);
        this.isDrawing = true;
        this.plist = [];
        console.log(event.clientX, event.clientY);
        this.main.onMouseDown(event.clientX, event.clientY);
      };
      this.handleMouseMove = (event) => {
        if (this.isDrawing) {
          console.log('Drawing at:', event.clientX, event.clientY);
          this.plist.push({x: event.clientX, y: event.clientY});
        }
      };
      this.handleMouseUp = () => {
        console.log('Mouse up');
        this.isDrawing = false;
        console.log(this.plist);
        
      };

      this.canvas.addEventListener('mousedown', this.handleMouseDown);
      this.canvas.addEventListener('mousemove', this.handleMouseMove);
      this.canvas.addEventListener('mouseup', this.handleMouseUp);
    },
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
canvas {
  position: fixed;
  top: 0;
  left: 0;
}
</style>
